<template>
    <home-layout>
        <div class="page-artist">
            <tags useHoverHighlight :tags="cates" @change="onTagChange" />
            <tags :tags="names" @change="onNameChange" />

            <ul class="artists" v-if="artists.length">
                <router-link tag="li" to="/artist-top" class="artist">
                    <figure class="figure">
                        <img
                            src="./../../assets/images/artist_rank.png"
                            class="top-img"
                            width="184"
                        />
                        <figcaption class="figcaption">歌手排行榜</figcaption>
                    </figure>
                </router-link>
                <artist-item
                    class="artist"
                    v-for="artist in artists"
                    :artist="artist"
                    :key="artist.id"
                />
            </ul>
            <infinite-loading
                forceUseInfiniteWrapper=".ant-layout-content"
                @infinite="loadmore"
            />
        </div>
    </home-layout>
</template>

<script>
import HomeLayout from "@/layouts/HomeLayout";
import artistItem from "@/components/Common/artist-item";
import tags from "@/components/Common/tags";
import { getArtistList } from "@/api/artist";

let INITIAL = "";
let cates = {
    男歌手: [
        {
            id: 1001,
            name: "华语男歌手",
        },
        {
            id: 2001,
            name: "欧美男歌手",
        },
        {
            id: 6001,
            name: "日本男歌手",
        },
        {
            id: 7001,
            name: "韩国男歌手",
        },
        {
            id: 4001,
            name: "其他男歌手",
        },
    ],
    女歌手: [
        {
            id: 1002,
            name: "华语女歌手",
        },
        {
            id: 2002,
            name: "欧美女歌手",
        },
        {
            id: 6002,
            name: "日本女歌手",
        },
        {
            id: 7002,
            name: "韩国女歌手",
        },
        {
            id: 4002,
            name: "其他女歌手",
        },
    ],
    "组合/乐队": [
        {
            id: 1003,
            name: "华语组合/乐队",
        },
        {
            id: 2003,
            name: "欧美组合/乐队",
        },
        {
            id: 6003,
            name: "日本组合/乐队",
        },
        {
            id: 7003,
            name: "韩国组合/乐队",
        },
        {
            id: 4003,
            name: "其他组合/乐队",
        },
    ],
    入驻歌手: [
        {
            id: 5001,
            name: "入驻歌手",
        },
    ],
};
let names = {
    名称: [
        {
            id: "A",
            name: "A",
        },
        {
            id: "B",
            name: "B",
        },
        {
            id: "C",
            name: "C",
        },
        {
            id: "D",
            name: "D",
        },
        {
            id: "E",
            name: "E",
        },
        {
            id: "F",
            name: "F",
        },
        {
            id: "G",
            name: "G",
        },

        {
            id: "H",
            name: "H",
        },
        {
            id: "I",
            name: "I",
        },
        {
            id: "J",
            name: "J",
        },
        {
            id: "K",
            name: "K",
        },
        {
            id: "L",
            name: "L",
        },
        {
            id: "M",
            name: "M",
        },
        {
            id: "N",
            name: "N",
        },

        {
            id: "O",
            name: "O",
        },
        {
            id: "P",
            name: "P",
        },
        {
            id: "Q",
            name: "Q",
        },
        {
            id: "R",
            name: "R",
        },
        {
            id: "S",
            name: "S",
        },
        {
            id: "T",
            name: "T",
        },

        {
            id: "U",
            name: "U",
        },
        {
            id: "V",
            name: "V",
        },
        {
            id: "W",
            name: "W",
        },
        {
            id: "X",
            name: "X",
        },
        {
            id: "Y",
            name: "Y",
        },
        {
            id: "Z",
            name: "Z",
        },

        {
            id: INITIAL,
            name: INITIAL,
        },
    ],
};
export default {
    name: "artist",
    data() {
        return {
            cates,
            names,
            artists: [],
            options: {
                limit: 11,
                offset: 0,
                cat: 1001,
                initial: INITIAL, // a-z
            },
        };
    },
    components: {
        HomeLayout,
        tags,
        artistItem,
    },
    methods: {
        async getArtists() {
            this.options.initial = encodeURIComponent(this.options.initial);
            try {
                let res = await getArtistList(this.options);
                this.artists = res.artists;
            } catch (e) {
                console.log(e);
            }
        },
        async loadmore($state) {
            let res = await getArtistList(this.options);
            if (res.artists.length) {
                this.options.offset += this.options.limit;
                this.artists.push(...res.artists);
                $state.loaded();
            } else {
                $state.complete();
            }
        },
        onTagChange(tag) {
            this.options.offset = 0;
            this.options.cat = tag.id;
            this.getArtists();
        },
        onNameChange(tag) {
            this.options.offset = 0;
            this.options.initial = tag.name;
            this.getArtists();
        },
    },
    /* async asyncData({$axios}) {
      let {data: {artists}} = await $axios.get('/api/artist/list')
      return {
        artists
      }
    } */
};
</script>

<style lang="less" scoped>
@import "./../../styles/mixins";

.page-artist {
    .artists {
        .grid-layout(15px, 15%);
        padding: 15px 0;
        a {
            display: block;
            color: #333;
        }
        .artist {
            .figure {
                overflow: hidden;
                cursor: pointer;
                &:hover {
                    .top-img {
                        transform: scale(1.23);
                    }
                }
                .top-img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    transition: all 0.23s;
                    transform-origin: center bottom;
                }
                .figcaption {
                    line-height: 25px;
                    font-size: 13px;
                }
            }
        }
    }
}
</style>
